body {
  margin: 0;
}
p {
  margin: 0;
}
button {
  border: none;
}
select {
  width: auto!important;
}
.detail_mask {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,0.6);
}
.new_detail {
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 14px;
  .details_content {
    position: absolute;
    width: 90%;
    height: 100%;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .operation {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin: 10px 0;
      span {
        margin-right: 8px;
        color: #559DF8;
        padding: 5px 14px;
        border-radius: 4px;
        border: 1px solid #559DF8;
        box-sizing: border-box;
        cursor: pointer;
      }
    }
    .details_sub_content {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .person_msg {
        width: 98%;
        height: 120px;
        // height: calc(173/1080*100vh);
        background: #F6F5FB;
        border-radius: 16px;
        margin: 0 auto;
        position: relative;
        .name {
          padding: 5px;
          display: flex;
          align-items: center;
          b {
            padding-left: 10px;
            font-size: 18px;
            color: #1D2129;
          }
        }
        .result {
          display: flex;
          padding-left: 10px;
          >div {
            display: flex;
            flex-direction: column;
          }
          .left {
            >p {
              color: #4E5969;
              font-size: 14px;
              height: 30px;
              line-height: 30px;
            }
            p:first-child {
              margin-bottom: 4px;
            }
          }
          .right {
            margin-left: 3%;
            font-size: 12px;
            color: #86909C;
            p {
              display: flex;
              height: 30px;
              line-height: 30px;
              span {
                padding-left: 5px;
              }
              select {
                width: auto;
              }
            }
            p:first-child {
              margin-bottom: 4px;
            }
          }
        }
        .icon {
          cursor: pointer;
          position: absolute;
          right: 5px;
          top: 50%;
          transform: translateY(-50%);
          .phone-dropdown.dropdown-menu > li > a{
              padding: 6px 8px;
              line-height: normal;
          }
          .phone-dropdown.dropdown-menu{
              min-width: 110px;
              top: 23px;
              left: auto;
              right: 35px;
          }
        }
        .other {
          position: absolute;
          left: 25%;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          flex-direction: column;
          font-size: 14px;
          color: #1D2129;
          >p {
            img {
              width: 20px;
              height: auto;
            }
          }
        }
        .other2 {
          position: absolute;
          left: 40%;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          font-size: 14px;
          color: #1D2129;
          text-align: center;
          >p {
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            img {
              width: 20px;
              height: auto;
            }
          }
        }
        .other3 {
          position: absolute;
          left: 55%;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          font-size: 14px;
          color: #1D2129;
          text-align: center;
          >p {
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            img {
              width: 20px;
              height: auto;
            }
          }
        }
      }
      .detail_msg {
        flex: 1;
        overflow: hidden;
        display: flex;
        >.left {
          width: 40%;
          height: 92%;
          border-radius: 12px 12px 12px 12px;
          border: 1px solid #E1DBFF;
          box-sizing: border-box;
          margin: 10px;
          >.top {
            border-bottom: 1px solid #DCE6EE;
            box-sizing: border-box;
            height: 30%;
            display: flex;
            justify-content: space-between;
            >.left {
              width: 85%;
              height: 80%;
              margin: auto 0 auto 10px;
              display: flex;
              align-items: center;
              border-radius: 6px;
              border: 1px solid #E1DBFF;
              box-sizing: border-box;
              position: relative;
              justify-content: space-between;
              .prev,.next {
                width: 21px;
                height: 21px;
                font-weight: 800;
                border: 1px solid #559DF8;
                border-radius: 100%;
                color: #559DF8;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                cursor: pointer;
                line-height: 17px;
              }
              .prev {
                margin: 0 15px;
              }
              .next {
                margin-right: 15px;
              }
              .call_detail {
                font-size: 12px;
                color: #1D2129;
                flex: 1;
                overflow-y: scroll;
                height: 100%;
                .every {
                  width: 100%;
                  display: flex;
                  height: 30px;
                  align-items: center;
                  margin: 10px 0;
                  span {
                    margin-left: 5px;
                    display: inline-block;
                    width: 25%;
                    overflow: hidden;
                  }
                  span:nth-child(2) {
                    width: 20%;
                  }
                  >select {
                    margin: 0 5px;
                    width: 30%!important;
                  }
                  >img {
                    width: 24px;
                    height: 24px;
                    margin: 10px 10px 10px 0;
                    cursor: pointer;
                  }
                }
              }
            }
            >.right {
              margin: 10px;
              img {
                cursor: pointer;
              }
            }
          }
          >.bottom {
            height: 70%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .tabs {
              height: calc(50/1080*100vh);
              font-size: 14px;
              color: #1D2129;
              text-align: center;
              padding-top: 10px;
              padding-bottom: 30px;
              border-bottom: 1px solid #F5F7FA;
              box-sizing: border-box;
              span:first-child {
                margin-right: 20px;
              }
              span {
                cursor: pointer;
              }
              .active {
                border-bottom: 2px solid #1474FA;
                box-sizing: border-box;
                padding-bottom: 5px;
                font-weight: 500;
              }
            }
            .tab_content {
              flex: 1;
              display: flex;
              overflow: hidden;
              .mediate_his, .repay_his {
                width: auto;
                flex: 1;
              }
              .mediate_his {
                .form_mediate {
                  >div {
                    font-size: 12px;
                    color: #4E5929;
                    // margin: 10px;
                    >label {
                      // margin-top: 10px;
                    }
                    >label:first-child {
                      display: block;
                      margin-bottom: 10px;
                    }
                    >textarea {
                      width: 96%;
                      margin: auto;
                    }
                  }
                  >.remark {
                    display: flex;
                    flex-direction: column;
                    .form-control {
                      margin-bottom: 10px;
                    }
                  }
                  >.result {
                    // width: 98%;
                    // height: 30px;
                    // line-height: 30px;
                    // display: flex;
                    // margin: 5px 0;
                    // justify-content: space-between;
                    // align-items: center;

                    display: flex;
                    flex-direction: column;
                    // >div {
                    //   display: flex;
                    //   align-items: center;
                    //   justify-content: space-between;
                    //   flex: 1;
                      .mediate_result {
                        margin-left: 10px;
                        flex: 1;
                        margin-right: 20px;
                      }
                      >p {
                        width: 98%;
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                      }
                    // }
                  }
                  >.time {
                    input {
                      width: 96%;
                      margin: auto;
                    }
                  }
                }
              }
              .repay_his {
                display: none;
                margin: 10px;
                font-size: 12px;
                overflow-y: scroll;
                form {
                  >.first {
                    text-align: center;
                    >div {
                      display: flex;
                      p {
                        flex: 1;
                        margin: 0 10px;
                        margin-bottom: 10px;
                        input {
                          height: 30px;
                          width: 100%;
                          text-indent: 5px;
                          border: 1px solid #666;
                          box-sizing: border-box;
                          padding:0 5px;
                        }
                        input::placeholder {
                          color: #333;
                        }
                        select {
                          width: 100%!important;
                          height: 30px;
                          line-height: 30px;
                        }
                      }
                    }
                    >button {
                      background: #3A8BF7;
                      border-radius: 4px;
                      color: #FFFFFF;
                      padding: 5px 10px;
                      cursor: pointer;
                      margin-top: 20px;
                    }
                  }
                }
              }
            }
            .buttons {
              margin: 12px auto;
              button {
                padding: 5px 26px;
                border-radius: 4px;
              }
              .save {
                background: #3A8BF7;
                color: #FFFFFF;
              }
              // .cancel {
              //   background: #F2F3F5;
              //   color: #4E5969;
              //   margin-left: 10px;
              // }
            }
          }
        }
        >.right {
          flex: 1;
          height: 92%;
          border-radius: 12px 12px 12px 12px;
          border: 1px solid #E1D8FF;
          display: flex;
          flex-direction: column;
          margin: 10px;
          >.tabs {
            width: 96%;
            height: 50px;
            line-height: 50px;
            box-shadow: inset 0px -1px 0px 0px #DAE2EA;
            color: #1D2129;
            margin: auto;
            >span {
              padding-bottom: 5px;
              margin-right: 10px;
              cursor: pointer;
            }
            .active {
              border-bottom: 2px solid #3A8BF7;
              box-sizing: border-box;
              font-weight: 500;
            }
          }
          >.list_content {
            flex: 1;
            overflow-y: scroll;
            >.list {
              width: 100%;
              flex: 1;
              overflow: hidden;
              >.bod {
                height: auto;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                margin: 0 auto 20px auto;
                overflow: hidden;
                >div {
                  display: flex;
                  border: 1px solid #EDEDED;
                  border-top: none;
                  box-sizing: border-box;
                  width: 96%;
                  line-height: 34px;
                  margin: auto;
                  >p {
                    width: 100%;
                    padding-left: 10px;
                  }
                  >p:nth-child(odd) {
                    border-right: 1px solid #EDEDED;
                    box-sizing: border-box;
                  }
                  span {
                    display: inline-block;
                  }
                }
                >div:first-child {
                  background: #F8F7FC;
                  margin-top: 15px;
                  border: 1px solid #EDEDED;
                }
              }

            }
            >.getMediationLog, .getSMSLog, .getOperateLog {
              width: 100%;
              margin-top: 10px;
              .sv-timeline-item {
              	position:relative;
              	padding-bottom:26px;
                .step {
                  height: 100%;
                  position: absolute;
                  left: 160px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  .sv-timeline-item__tail {
                    flex: 1;
                    border-left: 2px solid #3A8BF7;
                  }
                  .sv-timeline-item__node {
                  	border: #3A8BF7 1px solid;
                  	border-radius:50%;
                  	display:flex;
                  	justify-content:center;
                  	align-items:center;
                    >div {
                    	width:8px;
                    	height:8px;
                    	background-color: #3A8BF7;
                    	border-radius:50%;
                    }
                  }
                  .sv-timeline-item__node--normal {
                  	left:-1px;
                  	width:12px;
                  	height:12px;
                  }
                }
                .sv-timeline-item__wrapper {
                	padding-left:22px;
                  display:flex;
                  .sv-timeline-item__timestamp.is-bottom {
                  	color: #666;
                  	font-size: 14px;
                  	margin-right: 22px;
                    white-space: nowrap;
                    width: 150px;
                  }
                  .sv-timeline-item__timestamp {
                  	color: #909399;
                  	line-height:1;
                  	font-size:13px;
                  }
                  .sv-timeline-item__content {
                  	color:#303133;
                    flex: 1;
                  }
                }
              }
            }
            >.getReturnedPlan {
              width: 96%;
              margin-left: 10px;
              >tr {
                height: 30px;
                line-height: 30px;
                display: flex;
                td {
                  flex: 1;
                }
              }
            }
          }
        }
      }
    }
  }
}
.modal-content {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 10;
  background: #FFF;
  .dialog_mask {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0,0,0,0.6);
  }
  .dialog_content {
    position: fixed;
    width: 300px;
    height: 200px;
    background: #FFFFFF;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .modal-body {
      >div {
        display: flex;
        align-items: center;
        label {
          padding: 0;
        }
      }
    }
  }
}
.mini_container {
  z-index: 11;
  width: 280px;
  height: 130px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
  border-radius: 8px;
  >div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
    p {
      >img {
        width: 16px;
        height: auto;
        margin-right: 15px;
        cursor: pointer;
      }
    }
  }

  p {
    padding: 10px;
  }
}

.form_dialog {
  display: flex;
  align-items: center;
}
